<template>
	<view class="page-box">
		<view class="transfer-box">
			<view class="left-box">
				<view class="account-box1">
					<text>{{$t('my.follow')}}</text>
					<up-input :placeholder="fromMarketLabel" style="color:rgb(68, 182, 114)" placeholderStyle="color:rgb(68, 182, 114)" border="none" disabled></up-input>
					<image src="../../static/img/my/select-icon.png" style="width: 15rpx; height: 25rpx;margin-left: 6rpx;"></image>
				</view>
				<view class="account-box1">
					<text>{{$t('my.to')}}</text>
					<up-input :placeholder="toMarketLabel" style="color:#ec6d6e"  placeholderStyle="color:#ec6d6e" border="none" disabled></up-input>
					<image src="../../static/img/my/select-icon.png" style="width: 15rpx; height: 25rpx;margin-left: 6rpx;"></image>
				</view>
			</view>
			<view class="transfer-btn" @click="convert">
				<image src="../../static/img/my/up-down-icon.png" style="width: 30rpx; height: 30rpx;"></image>
			</view>
		</view>

		<view class="select-currency" @click="show = true">
			<view>{{$t('my.selectCurrency')}}</view>
			<view class="select-btn">
				<image :src="`../../static/img/my/${currencyCode}.png`" style="width: 40rpx; height: 40rpx;margin-right: 6rpx;"></image>
				{{currencyCode}}
				<image src="../../static/img/my/select-icon.png" style="width: 15rpx; height: 25rpx;margin-left: 6rpx;"></image>
			</view>
		</view>

		<view class="money-box">
			<up-input :placeholder="$t('trade.placeholder3')" border="none" v-model="money" type="number"></up-input>
			
		</view>
		<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 5rpx;font-size: 1rem;">
			<text style="color: #1f1f1f80;">{{$t('trade.available') + $t('robot.balance')}}：</text>
			<text>{{Number(balance).toFixed(2)}}</text>
		</view>

		<view class="btn-box">
			<u-button :text="$t('confirm')" type="success" shape="circle" color="#1C5FFF" @click="submit"></u-button>
		</view>
		
		<up-picker :show="show" :columns="columns" keyName="currencyCode" closeOnClickOverlay @close="show = false" @cancel="show = false" @confirm="confirm"></up-picker>

		<view class="bottom-box"></view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {
		getUserInfo,
		getCurrencyBalance,
		getMarket,
		postTransfer
	} from '@/common/api/common.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import { useI18n } from 'vue-i18n';
	const {t} = useI18n();
	
	const fromMarketLabel = ref('现货账户')
	const fromMarketId = ref('1')
	const toMarketLabel = ref('理财账户')
	const toMarketId = ref('2')
	const money = ref('')
	const currencyCode = ref('USDC')
	const typeList = ref([])
	const show = ref(false);
	const columns = ref([[]]);
	const balance = ref(0);
	
	
	const getMarketFn = async () => {
		const res = await getMarket()
		if(res.status == 0){
			fromMarketLabel.value = res.result.find(item => item.id == 1).name
			fromMarketId.value = res.result.find(item => item.id == 1).id
			toMarketLabel.value = res.result.find(item => item.id == 2).name
			toMarketId.value = res.result.find(item => item.id == 2).id
			typeList.value = res.result
		}
	}
	
	const getCurrencyBalanceFn = async () => {
		const res = await getCurrencyBalance({
			marketId: fromMarketId.value
		})
		if(res.status == 0){
			res.result.memberAccount.map((item,index) => {
				item.id = index + 1
			})
			columns.value[0] = res.result.memberAccount
			balance.value = res.result.memberAccount.find(item => item.currencyCode == currencyCode.value).availableBalance
		}
	}
	
	const confirm = (e) => {
	  show.value = false;
	  if(e.value[0].currencyCode == 'XTTA') {
		  uni.$u.toast(t('notYetOpen'))
		  return
	  }
	  currencyCode.value = e.value[0].currencyCode
	  balance.value = e.value[0].availableBalance
	};
	
	const convert = () => {
		if(fromMarketId.value == 1) {
			fromMarketLabel.value = typeList.value.find(item => item.id == 2).name
			fromMarketId.value = typeList.value.find(item => item.id == 2).id
			toMarketLabel.value = typeList.value.find(item => item.id == 1).name
			toMarketId.value = typeList.value.find(item => item.id == 1).id
		}else {
			fromMarketLabel.value = typeList.value.find(item => item.id == 1).name
			fromMarketId.value = typeList.value.find(item => item.id == 1).id
			toMarketLabel.value = typeList.value.find(item => item.id == 2).name
			toMarketId.value = typeList.value.find(item => item.id == 2).id
		}
		getCurrencyBalanceFn()
	}
	
	const submit = () => {
		if(!money.value) {
			uni.$u.toast(t('trade.placeholder3'))
			return 
		}
		uni.showModal({
			title: '提示',
			content: '确认要进行划转吗？',
			success: function (res) {
				if (res.confirm) {
					// console.log('用户点击确定');
					postTransfer({fromMarketId: fromMarketId.value,toMarketId: toMarketId.value, currencyCode: currencyCode.value,amount: money.value}).then(data => {
						if(data.status == 0) {
							uni.$u.toast(t('success'))
						}
					})
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			}
		});
		
		
	}
	
	onLoad(() => {
		
	})
	
	onShow(() => {
		getMarketFn();
		getCurrencyBalanceFn();
	})
</script>

<style lang="scss" scoped>
	.page-box {
		padding: 40rpx;
		box-sizing: border-box;

		.transfer-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			
			.left-box{
				width: calc(100% - 86rpx);
				view{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					text{
						color: #1f1f1f50;
						padding-right: 60rpx;
					}
				}
				
				.account-box1{
					::v-deep .u-input{
						height: 60rpx;
					}
				}
			}

			.transfer-btn {
				width: 86rpx;
				height: 150rpx;
				border-radius: 16rpx;
				background-color: #E6E6E6;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.select-currency {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			color: #1f1f1f80;
			margin-top: 20rpx;

			.select-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #1f1f1f;
			}
		}

		.money-box {
			background-color: #f5f5f5;
			border-radius: 16rpx;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			color: #1f1f1f80;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}


		.btn-box {
			margin: 50rpx auto 0;

			::v-deep .u-button {
				height: 88rpx !important;
			}
		}
	}
</style>